import React from 'react';
import {Badge, Button, Card, message, Modal, Table} from 'antd';
import axios from './../../axios';
import Utils from './../../utils/utils';


export default class HighTable extends React.Component {
    state = {
        dataSource2: [],
        selectCheckRowKeys: []
    };

    params = {
        page: 1
    };

    componentDidMount() {
        const dataSource = [
            {
                id: '0',
                userName: 'Jack',
                sex: '1',
                state: '1',
                interest: '1',
                birthday: '2000-01-01',
                address: '北京市海淀区奥林匹克公园',
                time: '09:00'
            },
            {
                id: '1',
                userName: 'Tom',
                sex: '1',
                state: '1',
                interest: '1',
                birthday: '2000-01-01',
                address: '北京市海淀区奥林匹克公园',
                time: '09:00'
            },
            {
                id: '2',
                userName: 'Lily',
                sex: '1',
                state: '1',
                interest: '1',
                birthday: '2000-01-01',
                address: '北京市海淀区奥林匹克公园',
                time: '09:00'
            },


        ]
        this.setState({
            dataSource
        });
        dataSource.map((item, index) => {
            item.key = index;
        })
        this.request();

    }

//动态获取mock数据
    request = () => {
        axios.ajax({
            url: '/table/high/list',
            data: {
                params: {
                    page: this.params.page
                },
                //isShowLoading 默认是true,除非某些接口不希望通过loading加载可以另外设置
                isShowLoading: false

            }

        }).then((res) => {
            if (res.code == '0') {
                console.log('res.result.list', res.result);
                res.result.list.map((item, index) => {
                    item.key = index;
                })

                this.setState({
                    dataSource2: res.result.list,
                    selectCheckRowKeys: [],   //删除后状态重置！！
                    selectRows: null,
                    //公共机制封装的分页
                    pagination: Utils.pagination(res, (current) => {
                        this.params.page = current
                        this.request();

                    })
                })
            }

        })

    };

    //多选、选中的删除动作
    handleDelete = (record) => {

        console.log('record',record);
        let id = record.id;

        Modal.confirm({
            title: '删除提示',
            content: `您确认删除id为${id}的数据吗？`,
            onOk: () => {
                message.success('删除成功！')
                this.request();
            }
        })

    };


    handleChange = (pagination, filters, sorter) => {
//点击分页、筛选、排序时触发
        this.setState({
            sortOrder: sorter.order
        })


    };


    render() {
        const columns = [
            {
                title: 'id',
                key: 'id',
                dataIndex: 'id',
            },
            {
                title: 'age',
                key: 'age',
                dataIndex: 'age',
                sorter: (a, b) => {
                    return a.age - b.age
                },
                sortOrder: this.state.sortOrder    //排序顺序动态变化
            },

            {
                title: '用户名',
                key: 'username',
                dataIndex: 'username'
            },
            {
                title: '性别',
                key: 'sex',
                dataIndex: 'sex',
                render(sex, record, index) {
                    return sex = 1 ? ' 男' : '女'
                }
            },
            {
                title: '状态',
                key: 'state',
                dataIndex: 'state',
                render(state, record, index) {
                    let selectState = {
                        //行内字段设置提示图标
                        '1': <Badge status="success" text='老师'/>,
                        '2': <Badge status="default" text='程序员'/>,
                        '3': <Badge status="warning" text='创业者'/>,
                        '4': <Badge status="error" text='企业家'/>,
                        '5': <Badge status="success" text='读书人'/>,
                    }
                    return selectState[state]
                }

            },
            {
                title: '爱好',
                key: 'interest',
                dataIndex: 'interest',
                render(interest, record, index) {
                    let selectInterest = {
                        '1': '读书',
                        '2': '绘画',
                        '3': '篮球',
                        '4': '摄影',
                        '5': '足球',
                        '6': '羽毛球',
                        '7': '吃饭饭',
                        '8': '毽子',
                    }
                    return selectInterest[interest]
                }
            },
            {
                title: '生日',
                key: 'birthday',
                dataIndex: 'birthday'
            },
            {
                title: '地址',
                key: 'address',
                dataIndex: 'address'
            },
            {
                title: '操作',
                fixed: 'right',
                render:(text, item, index) => {
                    return <a onClick={(record) => {
                        console.log('item',item)
                        this.handleDelete(item)
                    }}>删除</a>;
                }
            }

        ];
        //！！！ selectedRowKeys记住这个单词必须叫selectedRowKeys
        const rowSelection = {
            type: 'radio',
            selectedRowKeys: this.state.selectRowKeys

        };
        const rowCheckSelection = {
            type: 'checkbox',
            selectedRowKeys: this.state.selectCheckRowKeys,
            onChange: (selectedRowKeys, selectedRows) => {
                let Ids = selectedRows.map((item) => {
                    return item.id
                });

                this.setState({
                    selectCheckRowKeys: selectedRowKeys,
                    selectedRows,
                    selectedIds: Ids

                })

            }

        };
        return (
            <div>
                <Card title="mock动态渲染多选数据表格">
                    <div style={{marginBottom: 10}}>
                        <Button type="primary" onClick={this.handleDelete}>删除</Button>
                    </div>
                    <Table
                        bordered
                        rowSelection={rowCheckSelection}
                        columns={columns}
                        onChange={this.handleChange}
                        dataSource={this.state.dataSource2}
                        pagination={this.state.pagination}
                        // x的值是所有列的宽度加起来的总和：不能太大，接近就好
                        scroll={{x: 1500, y: 300}}

                    />
                </Card>


            </div>

        );
    }

}
